<route lang="json5">
{
style: {
navigationBarTitleText: '消息',

},
}
</route>

<template>
  <gi-page-wrapper>
    <view class="page">
      <view class="message-list">
        <template v-if="messages.length > 0">
          <MessageItem
            v-for="(item, index) in messages"
            :key="index"
            :message="item"
            @click="goToMessageDetail(item)"
          />
        </template>
        <template v-else>
          <view class="empty-state">
            <sar-empty description="暂无消息" />
          </view>
        </template>
      </view>

      <gi-gap></gi-gap>
    </view>
  </gi-page-wrapper>
</template>

<script lang="ts" setup>
import type { MessageItemData } from './data'
import MessageItem from './components/MessageItem.vue'

// Mock data for messages

const messages = ref<MessageItemData[]>([
  {
    id: 5,
    icon: '/static/images/user/icon-warning.svg',
    name: '安全消息',
    content: '您的设备需要定期维护，请安排时间',
    unreadCount: 1,
    type: 'system',
  },
  {
    id: 6,
    icon: '/static/images/user/icon-message.svg',
    name: '通知消息',
    content: '您有一个重要会议即将开始',
    unreadCount: 0,
    type: 'todo',
  },
])

// Navigate to message detail page
function goToMessageDetail(message: MessageItemData) {
  uni.navigateTo({
    url: `/pages-sub/message/detail?id=${message.id}`,
  })
}
</script>

<style lang="scss" scoped>
.message-header {
  padding: 10px $padding;
  background: var(--theme-bg-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-box {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;

    .search-input {
      background: var(--theme-card-bg);
      border-radius: 20px;
    }
  }

  .theme-switcher-container {
    margin-left: 10px;
  }
}

.message-tabs {
  position: sticky;
  top: 60px;
  z-index: 99;
  box-shadow: var(--theme-shadow-sm);

  .tabs {
    padding: 0 $padding;
  }
}

.message-list {
  padding: 0 $padding;
  background: var(--theme-bg);
}

.empty-state {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-text-muted);
}
</style>
